<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-30 10:25:40
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-17 20:40:15
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\views\dishmana\dishmanagement\details\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEfi
-->
<template>
  <div>
    <pb-drawer v-model="props.detailisVisible" :title="'查看菜品信息'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
      @confirmFn="confirmFn" v-if="props.detailisVisible">
      <div class="flex drawerdiv m-t3">
        <div class="left">
          <img :src="Bomdetails.pic" alt="">
        </div>
        <div class="center1">
          <div>
            <div><span>菜品编码：</span><span>{{ Bomdetails.dishCode }}</span></div>
            <div><span>助记码：</span><span>{{ Bomdetails.mnemonicCode }}</span></div>
            <div><span>技法：</span><span>{{ Bomdetails.skill }}</span></div>
            <div><span>原料类别：</span><span>{{ Bomdetails.materialCategory }}</span></div>
          </div>
          <div class="m-tb">
            <div><span>菜品名称：</span><span>{{ Bomdetails.dishName }}</span></div>
            <div><span>生熟比：</span><span>{{ Bomdetails.curingRate }}</span></div>
            <div><span>口味：</span><span>{{ Bomdetails.taste }}</span></div>
            <div class="warps"><span>标签：</span>
              <div class="lists">
                <div v-for="(ele, index) in Bomdetails.dishTargetAttributeNames" :key="index">
                  {{ ele }}
                </div>
              </div>
            </div>
          </div>
          <div>
            <div><span>菜品分类：</span><span>{{ Bomdetails.dishTypeName }}</span></div>
            <div><span>份重(熟)：</span><span>{{ Bomdetails.dishWeight }}</span></div>
            <div><span>供餐模式：</span><span>{{ Bomdetails.dishUseScopeName }}</span></div>
          </div>
        </div>
        <div class="videos">
          <div class="title m-b2">工艺视频：</div>
          <Videos class="vmp4" v-if="Bomdetails.video && Bomdetails.video != ''" :videoSrc="Bomdetails.video"
            width="136" height="74">
          </Videos>
          <div class="vmp4" v-else>暂无视频</div>
        </div>
        <div class="right">
          <div class="title">
            烹饪方法：
          </div>
          <div>
            {{ Bomdetails.cookingMethods }}
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="定价信息" name="first">
          <Prcinfo :Bomdata="Bomdata" />
        </el-tab-pane>
        <el-tab-pane label="BOM信息" name="second">
          <Bominfo :Bomdata="Bomdata" />
        </el-tab-pane>
        <el-tab-pane label="耗材BOM" name="third">
          <Consum :Bomdata="Bomdata">
          </Consum>
        </el-tab-pane>
        <el-tab-pane label="历史定价" name="fourth">
          <HistoryPic :Bomdata="Bomdata">

          </HistoryPic>
        </el-tab-pane>
      </el-tabs>
      <template #footer></template>
    </pb-drawer>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  Bomdata: {
    type: Object,
    default: {},
  },
  detailisVisible: {
    type: Boolean,
    default: false,
  },
  Bomdetails: {
    type: Object,
    default: {},
  }
})
const emit = defineEmits(['sendedit', 'OffEdit'])
import videoUrl from '@/assets/images/devceshi.mp4';
import Prcinfo from './prcinfo.vue'
import Bominfo from './bominfo.vue'
import Consum from './Consuminfo.vue'
import HistoryPic from './historypic.vue'
const activeName = ref('first')
const CancelFn = () => {
  emit('OffEdit')
}
const confirmFn = () => {
  emit('sendedit')
}
</script>
<style lang="scss" scoped>
.drawerdiv {
  .left {
    margin-right: 16px;
    margin-bottom: 48px;

    img {
      width: 104px;
      height: 104px;
    }
  }

  .center1 {
    width: 744px;

    .m-tb {
      margin: 16px 0;
    }

    >div {
      display: flex;

      >div:first-child {
        width: 25%
      }

      >div:nth-child(2) {
        width: 25%
      }

      >div:nth-child(3) {
        width: 22%
      }

      >div:nth-child(4) {
        flex: 1;
      }

      >div {

        >span:first-child {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.65);
          font-style: normal;
          text-transform: none;
        }

        >span:last-child {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.85);
          font-style: normal;
          text-transform: none;
        }
      }
    }

    // margin-right: 40px;
  }

  .videos {
    border-left: 1px solid rgba(0, 0, 0, 0.10);
    border-right: 1px solid rgba(0, 0, 0, 0.10);
    text-indent: 40px;

    .vmp4 {
      width: 136px;
      height: 74px;
      margin: 0 40px;

    }
  }

  .right {
    padding: 0 0 0 40px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    text-transform: none;
  }

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    font-style: normal;
    text-transform: none;
  }

  .warps {
    position: relative;

    .lists {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      left: 50px;
      top: -10px;

      // top: 3px;
      // width: 150px;
      >div {
        color: #0D968B;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #2BD4BD;
        padding: 0 4px;
        margin-right: 8px;
        margin-top: 10px;
      }
    }
  }
}
</style>